<template>
	<div class="padding-container preview-wrap">
		<div class="title-part">
			<span>{{ $root.lang.control.device.detail.task.taskRecord }}</span>
      <el-button size="mini" type="primary" class="pull-right"><a style="text-decoration: none;color:#fff;" @click="toCreate()">{{ $root.lang.control.device.detail.task.addTask }}</a></el-button>
		</div>
		<el-form ref="tableParams" :inline="true" :model="tableParams" size="small">
      <el-form-item :label="$root.lang.control.device.detail.task.taskNumber">
        <el-input v-model="tableParams.jobNumber"></el-input>
      </el-form-item>
      <el-form-item :label="$root.lang.control.device.detail.task.taskType">
        <el-select v-model="tableParams.jobType" :placeholder="$root.lang.control.device.detail.task.select" clearable>
          <el-option
            v-for="item in setType.operateType"
            :key="item.key"
            :label="item.title"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$root.lang.control.device.detail.task.remake">
        <el-input v-model="tableParams.remark"></el-input>
      </el-form-item>
      <el-form-item class="table-search" :label="$root.lang.control.device.detail.task.createTime">
        <el-date-picker
          v-model="tableParams.time"
          type="datetimerange"
          :range-separator="$root.lang.control.device.list.to"
          :start-placeholder="$root.lang.control.device.detail.task.startTime"
          :end-placeholder="$root.lang.control.device.detail.task.endTime"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="timestamp"
          :picker-options="pickerOptions"
          :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="searchAction()">{{ $root.lang.control.device.detail.task.query }}</el-button>
        <el-button size="small" @click="searchAction(true)">{{ $root.lang.control.device.detail.task.empty }}</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="listLoading"
      :data="taskList"
      :empty-text="$root.lang.control.device.list.noData"
      size="small"
      border
      style="width: 100%"
      >
      <el-table-column
        align="center"
        :label="$root.lang.control.device.detail.task.taskNumber">
        <template slot-scope="scope">
          <span>{{ scope.row.jobNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$root.lang.control.device.detail.task.taskType">
        <template slot-scope="scope">
          <span>{{ setType.operateType, scope.row.type, '--','title' | matchValue }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$root.lang.control.device.detail.task.otherSet">
        <template slot-scope="scope">
          <span v-if="scope.row.settingList.length == 0 ">--</span>
          <p class="otherset" v-if="scope.row.settingList.length > 0 "  v-for="item in  scope.row.settingList">{{ setType.operateType['2'].setType, item.key,"--",'name' | matchValue }}</p>
        </template>
      </el-table-column>
      <el-table-column
        width="180"
        align="center"
        :label="$root.lang.control.device.detail.task.appInfo">
        <template slot-scope="scope">
          <span>{{ scope.row.appName | dataFormat}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$root.lang.control.device.detail.task.remake">
        <template slot-scope="scope">
          <span> {{ scope.row.remark | dataFormat}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$root.lang.control.device.detail.task.launchTime">
        <template slot-scope="scope">
          <p>{{ scope.row.createTime | dateFormat}}</p>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$root.lang.control.device.detail.task.endTime">
        <template slot-scope="scope">
          <p>{{ scope.row.finishTime | dateFormat}}</p>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$root.lang.control.device.detail.task.deviceNum">
        <template slot-scope="scope">
          <p>{{ scope.row.deviceCount | dataFormat}}</p>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$root.lang.control.device.detail.task.finishNum">
        <template slot-scope="scope">
          <p>{{ scope.row.finishCount | dataFormat}}</p>
        </template>
      </el-table-column>
      <el-table-column 
        width="220"
        align="center"
        :label="$root.lang.control.device.list.operate">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="toDetail(scope.$index, scope.row)">{{ $root.lang.control.device.list.look }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-if="tableTotal>0"
      @size-change="sizeChange"
      @current-change="pageChange"
      @prev-click="pageChange"
      @next-click="pageChange"
      :current-page="tableParams.page"
      :page-sizes="[10, 30, 50, 100]"
      :page-size="tableParams.rows"
      layout="total, sizes, prev, pager, next"
      :total="tableTotal">
    </el-pagination>

	</div>
</template>

<script>
import '@/options/taskState'
import '@/options/baseState'
export default {
	name: 'DetailTaskList',
  props: {
    groupNumber: {
      type: String,
      default: ''
    }
  },
	data() {
    const minDate = 31507200000
		return {
			listLoading:false,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < minDate;
        }
      },
			tableParams:{
        groupNumber:this.groupNumber,
				page: 1,
				rows: 30,
        time: null,
				jobNumber: null,
        jobType: null,
        remark: null,
			},
      tableData:[],
      tableTotal:0,
      showEdit:false,
      taskList:null,
      setType: {},
      baseState: {},
		}
	},
  methods: {
    checkLang() {
      let langType = this.$root.getStorage('lang')
      if(langType == 'en') {
        this.setType = enSetType
        this.baseState = enBaseState
      } else {
        this.setType = setType
        this.baseState = baseState
      }
    },
    sizeChange(val) {
      this.tableParams.page = 1
      this.tableParams.rows = val
      this.fetchData()
    },
    pageChange(val) {
      this.tableParams.page = val
      this.fetchData()
    },
    toDetail(index,row) {
      this.$router.push({ name:'TaskDetail', params:{ id: row.jobNumber } })
    },
    toCreate() {
      this.$router.push({ name:'TaskCreate', query:{ groupNumber: this.groupNumber } })
    },
    searchAction(reset) {
      if(reset) {
        this.tableParams = {
          deviceNumber:this.deviceNumber,
          page: 1,
          rows: 30,
          jobNumber: null,
          jobType: null,
          jobState: null,
          state: null,
          time: null,
        }
      } else {
        this.tableParams.page = 1
        if(this.tableParams.time) {
          this.tableParams.beginTime = this.tableParams.time[0]
          this.tableParams.endTime = this.tableParams.time[1]
        } else {
          this.tableParams.time = null
          this.tableParams.beginTime = null
          this.tableParams.endTime = null
        }
      }
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      this.request({
          url: '/api/job/search',
          method: 'GET',
          params: this.$root.optionProcess(this.tableParams)
        }).then(response => {
          this.taskList = response.result.jobList
          this.tableTotal = response.result.total
          this.listLoading = false
        }).catch(error => {
          this.taskList = []
          this.listLoading = false
          console.log(error);
          // this.$message({
          //   message: error.errmsg,
          //   type: 'error',
          //   duration: 3 * 1000
          // })
      })
    },
  },
  created() {
    this.checkLang()
    this.fetchData()
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	.padding-container {
		text-align:left;
		.title-part {
			text-align: left;
			font-size:16px;
			padding-bottom:30px;
		}
	}
</style>